<template>
    <div class="toolbar-container">
        <div class="left-toolbar">
            <div class="config-layout-xy">
				<img src="../../../assets/icon_home.png" alt="" style="width: 20px; height: 18px; margin-right: 10px;">
				<div class="cfg-line" style="margin-right: 10px; color: #707070;"></div>
                <el-select v-model="modelType" placeholder="请选择平台" class="cfg-width">
                    <el-option
                        v-for="item in modelList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
				<div style="width: 7px"></div>
                <el-input
                    class="cfg-input cfg-width"
                    v-model="layoutX"
                    @change="changeLayoutXy('width')"
                    placeholder="请输入宽度"
                >
                    <template #prefix>W：</template>
                    <template #suffix>px</template>
                </el-input>
                <div style="padding:0 7px; display: flex; align-items: center; justify-content: center;">
					<img src="../../../assets/icon_link.png" alt="" style="width: 20px;">
				</div>
                <el-input
                    class="cfg-input cfg-width"
                    v-model="layouty"
                    @change="changeLayoutXy('height')"
                    placeholder="请输入高度"
                >
                    <template #prefix>H：</template>
                    <template #suffix>px</template>
                </el-input>
            </div>
            <!-- <el-button type="text" :disabled="undoDisabled" :title="i18nt('designer.toolbar.undoHint')" @click="undoHistory">
        <svg-icon icon-class="undo" /></el-button>
      <el-button type="text" :disabled="redoDisabled" :title="i18nt('designer.toolbar.redoHint')" @click="redoHistory">
        <svg-icon icon-class="redo" /></el-button>
      <el-button-group style="margin-left: 20px">
        <el-button :type="layoutType === 'PC' ? 'info': ''" @click="changeLayoutType('PC')">
          {{i18nt('designer.toolbar.pcLayout')}}</el-button>
        <el-button :type="layoutType === 'Pad' ? 'info': ''" @click="changeLayoutType('Pad')">
          {{i18nt('designer.toolbar.padLayout')}}</el-button>
        <el-button :type="layoutType === 'H5' ? 'info': ''" @click="changeLayoutType('H5')">
          {{i18nt('designer.toolbar.mobileLayout')}}</el-button>
      </el-button-group> 
      <el-button type="" style="margin-left: 20px" :title="i18nt('designer.toolbar.nodeTreeHint')" @click="showNodeTreeDrawer">
        <svg-icon icon-class="node-tree" /></el-button> -->
        </div>

        <el-drawer
            :title="i18nt('designer.toolbar.nodeTreeTitle')"
            direction="ltr"
            :visible.sync="showNodeTreeDrawerFlag"
            :modal="false"
            :size="280"
            :destroy-on-close="true"
            class="node-tree-drawer"
        >
            <el-tree
                ref="nodeTree"
                :data="nodeTreeData"
                node-key="id"
                default-expand-all
                highlight-current
                class="node-tree"
                icon-class="el-icon-arrow-right"
                @node-click="onNodeTreeClick"
            ></el-tree>
        </el-drawer>

		<!-- :style="{ width: toolbarWidth + 'px' }" -->
        <div class="right-toolbar"  style="width: 345px">   
            <div class="right-toolbar-con">
				<img title="上传" style="width: 30px;" src="../../../assets/icon_up.png" alt="">
				<div class="cfg-line" style="margin: 0 10px;"></div>
				<img title="清空" style="margin-right: 10px;" class="r-tool-icon" v-if="showToolButton('clearDesignerButton')"  @click="clearFormWidget" src="../../../assets/icon_delete.png" alt="">
				<img title="签出" style="margin-right: 10px;" class="r-tool-icon"  src="../../../assets/icon_out.png" alt="">
				<img title="签入" style="margin-right: 10px;" class="r-tool-icon"  src="../../../assets/icon_in.png" alt="">
				<div class="cfg-line" style="margin-right: 10px;"></div>
				<el-select disabled v-model="envType" placeholder="请选择环境" class="cfg-width" style="margin-right: 10px;">
                    <el-option
                        v-for="item in envList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
					<template #prefix>xxxx</template>
                    </el-option>
                </el-select>
				<img title="预览" style="margin-right: 10px; width: 12px;" class="r-tool-icon"  v-if="showToolButton('previewFormButton')"  @click="previewForm" src="../../../assets/icon_play.png" alt="">
				<img title="打包" style="margin-right: 10px;" class="r-tool-icon" src="../../../assets/icon_pack.png" alt="">
				<img title="下载" class="r-tool-icon" v-if="showToolButton('generateSFCButton')" src="../../../assets/icon_down.png" alt="">
				
                <!-- <el-button
                    v-if="showToolButton('clearDesignerButton')"
                    type="text"
                    @click="clearFormWidget"
                >
                    <i class="el-icon-delete" />{{
                        i18nt("designer.toolbar.clear")
                    }}
					</el-button
                >
                <el-button
                    v-if="showToolButton('previewFormButton')"
                    type="text"
                    @click="previewForm"
                >
                    <i class="el-icon-view" />{{
                        i18nt("designer.toolbar.preview")
                    }}</el-button
                >
                <el-button
                    v-if="showToolButton('importJsonButton')"
                    type="text"
                    @click="importJson"
                >
                    {{ i18nt("designer.toolbar.importJson") }}</el-button
                >
                <el-button
                    v-if="showToolButton('exportJsonButton')"
                    type="text"
                    @click="exportJson"
                >
                    {{ i18nt("designer.toolbar.exportJson") }}</el-button
                >
                <el-button
                    v-if="showToolButton('exportCodeButton')"
                    type="text"
                    @click="exportCode"
                >
                    {{ i18nt("designer.toolbar.exportCode") }}</el-button
                >
                <el-button
                    v-if="showToolButton('generateSFCButton')"
                    type="text"
                    @click="generateSFC"
                >
                    <svg-icon icon-class="vue-sfc" />{{
                        i18nt("designer.toolbar.generateSFC")
                    }}</el-button
                >
                <template v-for="(idx, slotName) in $slots">
                    <slot :name="slotName"></slot>
                </template>
				 -->
            </div>
        </div>

        <el-dialog
            :title="i18nt('designer.toolbar.preview')"
            :visible.sync="showPreviewDialogFlag"
            v-if="showPreviewDialogFlag"
            :show-close="true"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            center
            v-dialog-drag
            :destroy-on-close="true"
            :append-to-body="true"
            class="small-padding-dialog"
            width="75%"
            :fullscreen="layoutType === 'H5' || layoutType === 'Pad'"
        >
            <div>
                <div
                    class="form-render-wrapper"
                    :class="[
                        layoutType === 'H5'
                            ? 'h5-layout'
                            : layoutType === 'Pad'
                            ? 'pad-layout'
                            : '',
                    ]"
                >
                    <VFormRender
                        ref="preForm"
                        :form-json="formJson"
                        :form-data="testFormData"
                        :preview-state="true"
                        :option-data="testOptionData"
                        :global-dsv="designerDsv"
                        @appendButtonClick="testOnAppendButtonClick"
                        @buttonClick="testOnButtonClick"
                        @formChange="handleFormChange"
                    >
                        <!--
            <div slot="testSlot">aaaa</div>
            -->
                    </VFormRender>
                </div>
            </div>
            <code-editor v-model="testFunc" style="display: none"></code-editor>
            <!-- <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="getFormData">{{
                    i18nt("designer.hint.getFormData")
                }}</el-button>
                <el-button type="primary" @click="resetForm">{{
                    i18nt("designer.hint.resetForm")
                }}</el-button>
                <el-button type="primary" @click="setFormDisabled">{{
                    i18nt("designer.hint.disableForm")
                }}</el-button>
                <el-button type="primary" @click="setFormEnabled">{{
                    i18nt("designer.hint.enableForm")
                }}</el-button>
                <el-button type="" @click="showPreviewDialogFlag = false">{{
                    i18nt("designer.hint.closePreview")
                }}</el-button>
                <el-button v-if="false" @click="printFormJson"
                    >PrintFormJson</el-button
                >
                <el-button v-if="false" @click="testValidate"
                    >TestValidate</el-button
                >
                <el-button v-if="false" @click="testSetFormData"
                    >TestSF</el-button
                >
                <el-button v-if="false" @click="testReloadOptionData"
                    >Test ROD</el-button
                >
            </div> -->
        </el-dialog>

        <el-dialog
            :title="i18nt('designer.toolbar.importJson')"
            :visible.sync="showImportJsonDialogFlag"
            v-if="showImportJsonDialogFlag"
            :show-close="true"
            class="small-padding-dialog"
            center
            append-to-body
            v-dialog-drag
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :destroy-on-close="true"
        >
            <el-alert
                type="info"
                :title="i18nt('designer.hint.importJsonHint')"
                show-icon
                class="alert-padding"
            ></el-alert>
            <code-editor
                :mode="'json'"
                :readonly="false"
                v-model="importTemplate"
            ></code-editor>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="doJsonImport">
                    {{ i18nt("designer.hint.import") }}</el-button
                >
                <el-button @click="showImportJsonDialogFlag = false">
                    {{ i18nt("designer.hint.cancel") }}</el-button
                >
            </div>
        </el-dialog>

        <el-dialog
            :title="i18nt('designer.toolbar.exportJson')"
            :visible.sync="showExportJsonDialogFlag"
            v-if="showExportJsonDialogFlag"
            :show-close="true"
            class="small-padding-dialog"
            center
            append-to-body
            v-dialog-drag
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :destroy-on-close="true"
        >
            <code-editor
                :mode="'json'"
                :readonly="true"
                v-model="jsonContent"
            ></code-editor>
            <div slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    class="copy-json-btn"
                    :data-clipboard-text="jsonRawContent"
                    @click="copyFormJson"
                >
                    {{ i18nt("designer.hint.copyJson") }}</el-button
                >
                <el-button @click="saveFormJson">{{
                    i18nt("designer.hint.saveFormJson")
                }}</el-button>
                <el-button type="" @click="showExportJsonDialogFlag = false">
                    {{ i18nt("designer.hint.closePreview") }}</el-button
                >
            </div>
        </el-dialog>

        <el-dialog
            :title="i18nt('designer.toolbar.exportCode')"
            :visible.sync="showExportCodeDialogFlag"
            v-if="showExportCodeDialogFlag"
            :show-close="true"
            class="small-padding-dialog"
            center
            append-to-body
            v-dialog-drag
            width="65%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :destroy-on-close="true"
        >
            <el-tabs
                type="border-card"
                class="no-box-shadow no-padding"
                v-model="activeCodeTab"
            >
                <el-tab-pane label="Vue" name="vue">
                    <code-editor
                        :mode="'html'"
                        :readonly="true"
                        v-model="vueCode"
                        :user-worker="false"
                    ></code-editor>
                </el-tab-pane>
                <el-tab-pane label="HTML" name="html">
                    <code-editor
                        :mode="'html'"
                        :readonly="true"
                        v-model="htmlCode"
                        :user-worker="false"
                    ></code-editor>
                </el-tab-pane>
            </el-tabs>
            <div slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    class="copy-vue-btn"
                    :data-clipboard-text="vueCode"
                    @click="copyVueCode"
                >
                    {{ i18nt("designer.hint.copyVueCode") }}</el-button
                >
                <el-button
                    type="primary"
                    class="copy-html-btn"
                    :data-clipboard-text="htmlCode"
                    @click="copyHtmlCode"
                >
                    {{ i18nt("designer.hint.copyHtmlCode") }}</el-button
                >
                <el-button @click="saveVueCode">{{
                    i18nt("designer.hint.saveVueCode")
                }}</el-button>
                <el-button @click="saveHtmlCode">{{
                    i18nt("designer.hint.saveHtmlCode")
                }}</el-button>
                <el-button type="" @click="showExportCodeDialogFlag = false">
                    {{ i18nt("designer.hint.closePreview") }}</el-button
                >
            </div>
        </el-dialog>

        <el-dialog
            :title="i18nt('designer.hint.exportFormData')"
            :visible.sync="showFormDataDialogFlag"
            v-if="showFormDataDialogFlag"
            :show-close="true"
            class="dialog-title-light-bg"
            center
            v-dialog-drag
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :destroy-on-close="true"
            :append-to-body="true"
        >
            <div style="border: 1px solid #dcdfe6">
                <code-editor
                    :mode="'json'"
                    :readonly="true"
                    v-model="formDataJson"
                ></code-editor>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    class="copy-form-data-json-btn"
                    :data-clipboard-text="formDataRawJson"
                    @click="copyFormDataJson"
                >
                    {{ i18nt("designer.hint.copyFormData") }}</el-button
                >
                <el-button @click="saveFormData">{{
                    i18nt("designer.hint.saveFormData")
                }}</el-button>
                <el-button type="" @click="showFormDataDialogFlag = false">
                    {{ i18nt("designer.hint.closePreview") }}</el-button
                >
            </div>
        </el-dialog>

        <el-dialog
            :title="'生成代码'"
            :visible.sync="showExportSFCDialogFlag"
            v-if="showExportSFCDialogFlag"
            :show-close="true"
            class="small-padding-dialog"
            center
            append-to-body
            v-dialog-drag
            width="65%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :destroy-on-close="true"
        >
            <el-tabs
                type="border-card"
                class="no-box-shadow no-padding"
                v-model="activeSFCTab"
            >
                <el-tab-pane label="Vue2" name="vue2">
                    <code-editor
                        :mode="'html'"
                        :readonly="true"
                        v-model="sfcCode"
                        :user-worker="false"
                    ></code-editor>
                </el-tab-pane>
                <!-- <el-tab-pane label="Vue3" name="vue3">
                    <code-editor
                        :mode="'html'"
                        :readonly="true"
                        v-model="sfcCodeV3"
                        :user-worker="false"
                    ></code-editor>
                </el-tab-pane> -->
            </el-tabs>
            <div slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    class="copy-vue2-sfc-btn"
                    :data-clipboard-text="sfcCode"
                    @click="copyV2SFC"
                >
                    {{ i18nt("designer.hint.copyVue2SFC") }}</el-button
                >
                <!-- <el-button
                    type="primary"
                    class="copy-vue3-sfc-btn"
                    :data-clipboard-text="sfcCodeV3"
                    @click="copyV3SFC"
                >
                    {{ i18nt("designer.hint.copyVue3SFC") }}</el-button
                > -->
                <el-button @click="saveV2SFC">{{
                    i18nt("designer.hint.saveVue2SFC")
                }}</el-button>
                <!-- <el-button @click="saveV3SFC">{{
                    i18nt("designer.hint.saveVue3SFC")
                }}</el-button> -->
                <el-button type="" @click="showExportSFCDialogFlag = false">
                    {{ i18nt("designer.hint.closePreview") }}</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import VFormRender from "@/components/form-render/index";
import CodeEditor from "@/components/code-editor/index";
import Clipboard from "clipboard";
import {
    deepClone,
    copyToClipboard,
    generateId,
    getQueryParam,
    traverseAllWidgets,
    addWindowResizeHandler,
} from "@/utils/util";
import i18n from "@/utils/i18n";
import { generateCode } from "@/utils/code-generator";
import { genSFC } from "@/utils/sfc-generator";
import loadBeautifier from "@/utils/beautifierLoader";
import { saveAs } from "file-saver";
import SvgIcon from "@/components/svg-icon";
import { CONFIG_LAYOUT_XY,MODEL_LIST,ENV_LIST } from "@/utils/config";

export default {
    name: "ToolbarPanel",
    mixins: [i18n],
    components: {
        VFormRender,
        CodeEditor,
        Clipboard,
        SvgIcon,
    },
    props: {
        designer: Object,
        globalDsv: {
            type: Object,
            default: () => ({}),
        },
    },
    inject: ["getDesignerConfig"],
    data() {
        return {
			modelType:'H5',
			modelList:MODEL_LIST,
            layoutX: CONFIG_LAYOUT_XY.x,
            layouty: CONFIG_LAYOUT_XY.y,
			envType:'dev',
			envList:ENV_LIST,

            designerConfig: this.getDesignerConfig(),
            toolbarWidth: 420,
            showPreviewDialogFlag: false,
            showImportJsonDialogFlag: false,
            showExportJsonDialogFlag: false,
            showExportCodeDialogFlag: false,
            showFormDataDialogFlag: false,
            showExportSFCDialogFlag: false,
            showNodeTreeDrawerFlag: false,

            nodeTreeData: [],

            testFunc: "",
            importTemplate: "",
            jsonContent: "",
            jsonRawContent: "",

            formDataJson: "",
            formDataRawJson: "",

            vueCode: "",
            htmlCode: "",

            sfcCode: "",
            sfcCodeV3: "",

            activeCodeTab: "vue",
            activeSFCTab: "vue2",

            testFormData: {
                // 'userName': '666888',
                // 'productItems': [
                //   {'pName': 'iPhone12', 'pNum': 10},
                //   {'pName': 'P50', 'pNum': 16},
                // ]

                select62173: 2,
            },
            testOptionData: {
                select62173: [
                    { label: "01", value: 1 },
                    { label: "22", value: 2 },
                    { label: "333", value: 3 },
                ],

                select001: [
                    { label: "辣椒", value: 1 },
                    { label: "菠萝", value: 2 },
                    { label: "丑橘子", value: 3 },
                ],
            },
        };
    },
    computed: {
        formJson() {
            return {
                // widgetList: this.designer.widgetList,
                // formConfig: this.designer.formConfig

                widgetList: deepClone(this.designer.widgetList),
                formConfig: deepClone(this.designer.formConfig),
            };
        },

        undoDisabled() {
            return !this.designer.undoEnabled();
        },

        redoDisabled() {
            return !this.designer.redoEnabled();
        },

        layoutType() {
            return this.designer.getLayoutType();
        },

        designerDsv() {
            return this.globalDsv;
        },
    },
    watch: {
        "designer.widgetList": {
            deep: true,
            handler(val) {
                //console.log('test-----', val)
                //this.refreshNodeTree()
            },
        },
    },
    mounted() {
        let maxTBWidth = this.designerConfig.toolbarMaxWidth || 420;
        let minTBWidth = this.designerConfig.toolbarMinWidth || 300;
        let newTBWidth = window.innerWidth - 260 - 300 - 320 - 80;
        this.toolbarWidth =
            newTBWidth >= maxTBWidth
                ? maxTBWidth
                : newTBWidth <= minTBWidth
                ? minTBWidth
                : newTBWidth;
        addWindowResizeHandler(() => {
            this.$nextTick(() => {
                let newTBWidth2 = window.innerWidth - 260 - 300 - 320 - 80;
                this.toolbarWidth =
                    newTBWidth2 >= maxTBWidth
                        ? maxTBWidth
                        : newTBWidth2 <= minTBWidth
                        ? minTBWidth
                        : newTBWidth2;
            });
        });
    },
    methods: {
        changeLayoutXy(type) {
            if (type == "width") {
                this.designer.changeLayoutXy(type, this.layoutX);
            }
            if (type == "height") {
                this.designer.changeLayoutXy(type, this.layouty);
            }
        },
        showToolButton(configName) {
            if (this.designerConfig[configName] === undefined) {
                return true;
            }

            return !!this.designerConfig[configName];
        },

        buildTreeNodeOfWidget(widget, treeNode) {
            let curNode = {
                id: widget.id,
                label: widget.options.label || widget.type,
                //selectable: true,
            };
            treeNode.push(curNode);

            if (widget.category === undefined) {
                return;
            }

            curNode.children = [];
            if (widget.type === "grid") {
                widget.cols.map((col) => {
                    let colNode = {
                        id: col.id,
                        label: col.options.name || widget.type,
                        children: [],
                    };
                    curNode.children.push(colNode);
                    col.widgetList.map((wChild) => {
                        this.buildTreeNodeOfWidget(wChild, colNode.children);
                    });
                });
            } else if (widget.type === "table") {
                //TODO: 需要考虑合并单元格！！
                widget.rows.map((row) => {
                    let rowNode = {
                        id: row.id,
                        label: "table-row",
                        selectable: false,
                        children: [],
                    };
                    curNode.children.push(rowNode);

                    row.cols.map((cell) => {
                        if (!!cell.merged) {
                            //跳过合并单元格！！
                            return;
                        }

                        let rowChildren = rowNode.children;
                        let cellNode = {
                            id: cell.id,
                            label: "table-cell",
                            children: [],
                        };
                        rowChildren.push(cellNode);

                        cell.widgetList.map((wChild) => {
                            this.buildTreeNodeOfWidget(
                                wChild,
                                cellNode.children
                            );
                        });
                    });
                });
            } else if (widget.type === "tab") {
                widget.tabs.map((tab) => {
                    let tabNode = {
                        id: tab.id,
                        label: tab.options.name || widget.type,
                        selectable: false,
                        children: [],
                    };
                    curNode.children.push(tabNode);
                    tab.widgetList.map((wChild) => {
                        this.buildTreeNodeOfWidget(wChild, tabNode.children);
                    });
                });
            } else if (widget.type === "sub-form") {
                widget.widgetList.map((wChild) => {
                    this.buildTreeNodeOfWidget(wChild, curNode.children);
                });
            } else if (widget.category === "container") {
                //自定义容器
                widget.widgetList.map((wChild) => {
                    this.buildTreeNodeOfWidget(wChild, curNode.children);
                });
            }
        },

        refreshNodeTree() {
            this.nodeTreeData.length = 0;
            this.designer.widgetList.forEach((wItem) => {
                this.buildTreeNodeOfWidget(wItem, this.nodeTreeData);
            });
        },

        showNodeTreeDrawer() {
            this.refreshNodeTree();
            this.showNodeTreeDrawerFlag = true;
            this.$nextTick(() => {
                if (!!this.designer.selectedId) {
                    //同步当前选中组件到节点树！！！
                    this.$refs.nodeTree.setCurrentKey(this.designer.selectedId);
                }
            });
        },

        undoHistory() {
            this.designer.undoHistoryStep();
        },

        redoHistory() {
            this.designer.redoHistoryStep();
        },

        changeLayoutType(newType) {
            this.designer.changeLayoutType(newType);
        },

        clearFormWidget() {
            this.designer.clearDesigner();
            this.designer.formWidget.clearWidgetRefList();
        },

        previewForm() {
            this.showPreviewDialogFlag = true;
        },

        saveAsFile(fileContent, defaultFileName) {
            this.$prompt(
                this.i18nt("designer.hint.fileNameForSave"),
                this.i18nt("designer.hint.saveFileTitle"),
                {
                    inputValue: defaultFileName,
                    closeOnClickModal: false,
                    inputPlaceholder: this.i18nt(
                        "designer.hint.fileNameInputPlaceholder"
                    ),
                }
            )
                .then(({ value }) => {
                    if (!value) {
                        value = defaultFileName;
                    }

                    if (getQueryParam("vscode") == 1) {
                        this.vsSaveFile(value, fileContent);
                        return;
                    }

                    const fileBlob = new Blob([fileContent], {
                        type: "text/plain;charset=utf-8",
                    });
                    saveAs(fileBlob, value);
                })
                .catch(() => {
                    //
                });
        },

        vsSaveFile(fileName, fileContent) {
            const msgObj = {
                cmd: "writeFile",
                data: {
                    fileName,
                    code: fileContent,
                },
            };
            window.parent.postMessage(msgObj, "*");
        },

        importJson() {
            this.importTemplate = JSON.stringify(
                this.designer.getImportTemplate(),
                null,
                "  "
            );
            this.showImportJsonDialogFlag = true;
        },

        doJsonImport() {
            try {
                let importObj = JSON.parse(this.importTemplate);
                this.designer.loadFormJson(importObj);

                this.showImportJsonDialogFlag = false;
                this.$message.success(
                    this.i18nt("designer.hint.importJsonSuccess")
                );

                this.designer.emitHistoryChange();

                this.designer.emitEvent("form-json-imported", []);
            } catch (ex) {
                this.$message.error(ex + "");
            }
        },

        exportJson() {
            let widgetList = deepClone(this.designer.widgetList);
            let formConfig = deepClone(this.designer.formConfig);
            this.jsonContent = JSON.stringify(
                { widgetList, formConfig },
                null,
                "  "
            );
            this.jsonRawContent = JSON.stringify({ widgetList, formConfig });
            this.showExportJsonDialogFlag = true;
        },

        copyFormJson(e) {
            copyToClipboard(
                this.jsonRawContent,
                e,
                this.$message,
                this.i18nt("designer.hint.copyJsonSuccess"),
                this.i18nt("designer.hint.copyJsonFail")
            );
        },

        saveFormJson() {
            this.saveAsFile(this.jsonContent, `vform${generateId()}.json`);
        },

        exportCode() {
            this.vueCode = generateCode(this.formJson);
            this.htmlCode = generateCode(this.formJson, "html");
            this.showExportCodeDialogFlag = true;
        },

        copyVueCode(e) {
            copyToClipboard(
                this.vueCode,
                e,
                this.$message,
                this.i18nt("designer.hint.copyVueCodeSuccess"),
                this.i18nt("designer.hint.copyVueCodeFail")
            );
        },

        copyHtmlCode(e) {
            copyToClipboard(
                this.htmlCode,
                e,
                this.$message,
                this.i18nt("designer.hint.copyHtmlCodeSuccess"),
                this.i18nt("designer.hint.copyHtmlCodeFail")
            );
        },

        saveVueCode() {
            this.saveAsFile(this.vueCode, `vform${generateId()}.vue`);
        },

        saveHtmlCode() {
            this.saveAsFile(this.htmlCode, `vform${generateId()}.html`);
        },

        generateSFC() {
            loadBeautifier((beautifier) => {
                this.sfcCode = genSFC(
                    this.designer.formConfig,
                    this.designer.widgetList,
                    beautifier
                );
                this.sfcCodeV3 = genSFC(
                    this.designer.formConfig,
                    this.designer.widgetList,
                    beautifier,
                    true
                );
                this.showExportSFCDialogFlag = true;
            });
        },

        copyV2SFC(e) {
            copyToClipboard(
                this.sfcCode,
                e,
                this.$message,
                this.i18nt("designer.hint.copySFCSuccess"),
                this.i18nt("designer.hint.copySFCFail")
            );
        },

        copyV3SFC(e) {
            copyToClipboard(
                this.sfcCodeV3,
                e,
                this.$message,
                this.i18nt("designer.hint.copySFCSuccess"),
                this.i18nt("designer.hint.copySFCFail")
            );
        },

        saveV2SFC() {
            this.saveAsFile(this.sfcCode, `vformV2-${generateId()}.vue`);
        },

        saveV3SFC() {
            this.saveAsFile(this.sfcCodeV3, `vformV3-${generateId()}.vue`);
        },

        getFormData() {
            this.$refs["preForm"]
                .getFormData()
                .then((formData) => {
                    this.formDataJson = JSON.stringify(formData, null, "  ");
                    this.formDataRawJson = JSON.stringify(formData);

                    this.showFormDataDialogFlag = true;
                })
                .catch((error) => {
                    this.$message.error(error);
                });
        },

        copyFormDataJson(e) {
            copyToClipboard(
                this.formDataRawJson,
                e,
                this.$message,
                this.i18nt("designer.hint.copyJsonSuccess"),
                this.i18nt("designer.hint.copyJsonFail")
            );
        },

        saveFormData() {
            this.saveAsFile(this.htmlCode, `formData${generateId()}.json`);
        },

        resetForm() {
            this.$refs["preForm"].resetForm();
        },

        setFormDisabled() {
            this.$refs["preForm"].disableForm();
        },

        setFormEnabled() {
            this.$refs["preForm"].enableForm();
        },

        printFormJson() {
            let tmpFS = {
                widgetList: deepClone(this.designer.widgetList),
                formConfig: deepClone(this.designer.formConfig),
            };

            console.log(tmpFS);
        },

        testValidate() {
            console.log("test===", this.$refs["preForm"].validateForm());
        },

        testSetFormData() {
            // let fData = {
            //   'fuTest': [
            //     {
            //       name: '上传文件测试.xlsx',
            //       url: 'https://www.vform666.com/123.xlsx'
            //     }
            //   ]
            // }
            // this.$refs['preForm'].setFormData(fData)

            let nfData = {
                checkbox45524: [1, 2],
            };
            this.$refs["preForm"].setFormData(nfData);
        },

        testReloadOptionData() {
            this.testOptionData["select001"].push({
                label: "aaa",
                value: 888,
            });

            //this.$refs.preForm.reloadOptionData()
            this.$refs.preForm.reloadOptionData("select001");
        },

        handleFormChange(fieldName, newValue, oldValue, formModel) {
            /*
        console.log('---formChange start---')
        console.log('fieldName', fieldName)
        console.log('newValue', newValue)
        console.log('oldValue', oldValue)
        console.log('formModel', formModel)
        console.log('---formChange end---')
        */
        },

        testOnAppendButtonClick(clickedWidget) {
            console.log("test", clickedWidget);
        },

        testOnButtonClick(button) {
            console.log("test", button);
        },

        findWidgetById(wId) {
            let foundW = null;
            traverseAllWidgets(this.designer.widgetList, (w) => {
                if (w.id === wId) {
                    foundW = w;
                }
            });

            return foundW;
        },

        onNodeTreeClick(nodeData, node, nodeEl) {
            //console.log('test', JSON.stringify(nodeData))

            if (nodeData.selectable !== undefined && !nodeData.selectable) {
                this.$message.info(
                    this.i18nt("designer.hint.currentNodeCannotBeSelected")
                );
            } else {
                const selectedId = nodeData.id;
                const foundW = this.findWidgetById(selectedId);
                if (!!foundW) {
                    this.designer.setSelected(foundW);
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
:deep(.el-input--small .el-input__inner){
	height: 24px;
	line-height: 24px;
}
:deep(.el-input--small .el-input__icon){
	line-height: 24px;
}

.r-tool-icon{
	width: 17px;
}
.cfg-line{
	width: 1px;
	height: 17px;
	background-color: #707070;
}
div.toolbar-container {
    flex: 1;
    display: flex;
    align-items: center;
	height: 100%;
    //min-width: 728px;  /* 解决工具按钮栏换行的问题 */
    /* 上一行css有问题，当窗口宽度不足时会把按钮挤出到右边的属性设置区，弃之！ */
}

.left-toolbar {
    // float: left;
    font-size: 16px;
    flex: 1;
}

.right-toolbar {
    float: right;
    //width: 420px;
    text-align: right;
    overflow: hidden;

    .right-toolbar-con {
        text-align: left;
        width: 600px;
		display: flex;
		align-items: center;
    }

    ::v-deep .el-button--text {
        font-size: 14px !important;
    }
}

.el-button i {
    margin-right: 3px;
}

.small-padding-dialog {
    ::v-deep .el-dialog__header {
        //padding-top: 3px;
        //padding-bottom: 3px;
        background: #f1f2f3;
    }

    ::v-deep .el-dialog__body {
        padding: 12px 15px 12px 15px;

        .el-alert.alert-padding {
            padding: 0 10px;
        }
    }

    ::v-deep .ace-container {
        border: 1px solid #dcdfe6;
    }
}

.dialog-title-light-bg {
    ::v-deep .el-dialog__header {
        background: #f1f2f3;
    }
}

.no-box-shadow {
    box-shadow: none;
}

.no-padding.el-tabs--border-card {
    ::v-deep .el-tabs__content {
        padding: 0;
    }
}

.form-render-wrapper {
	background: url("../../../assets/prew_iphone.png");
	position: relative;
	background-size: 100%;
    //height: calc(100vh - 142px);
    //all: revert !important; /* 防止表单继承el-dialog等外部样式，未生效，原因不明？？ */
}

.form-render-wrapper.h5-layout {
    margin: 0 auto;
    // width: 420px;
    // height: calc(100vh - 142px);
	width: 375px;
	height: 667px;

    border-radius: 15px;
    //border-width: 10px;
    // box-shadow: 0 0 1px 10px #495060;
    overflow-y: auto;
    overflow-x: hidden;
}

.form-render-wrapper.pad-layout {
    margin: 0 auto;
    width: 960px;
    border-radius: 15px;
    //border-width: 10px;
    box-shadow: 0 0 1px 10px #495060;
    height: calc(100vh - 142px);
    overflow-y: auto;
    overflow-x: hidden;
}

.node-tree-drawer ::v-deep {
    .el-drawer {
        padding: 10px;
        overflow: auto;
    }

    .el-drawer__header {
        margin-bottom: 12px;
        padding: 5px 5px 0;
    }

    .el-drawer__body {
        padding-left: 5px;
    }
}

/*.node-tree-scroll-bar {*/
/*  height: 100%;*/
/*  overflow: auto;*/
/*}*/

.node-tree ::v-deep {
    .el-tree > .el-tree-node:after {
        border-top: none;
    }
    .el-tree-node {
        position: relative;
        padding-left: 12px;
    }

    .el-tree-node__content {
        padding-left: 0 !important;
    }

    .el-tree-node__expand-icon.is-leaf {
        display: none;
    }
    .el-tree-node__children {
        padding-left: 12px;
        overflow: visible !important; /* 加入此行让el-tree宽度自动撑开，超出宽度el-draw自动出现水平滚动条！ */
    }

    .el-tree-node :last-child:before {
        height: 38px;
    }

    .el-tree > .el-tree-node:before {
        border-left: none;
    }

    .el-tree > .el-tree-node:after {
        border-top: none;
    }

    .el-tree-node:before {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .el-tree-node:after {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .el-tree-node:before {
        border-left: 1px dashed #4386c6;
        bottom: 0px;
        height: 100%;
        top: -10px;
        width: 1px;
    }

    .el-tree-node:after {
        border-top: 1px dashed #4386c6;
        height: 20px;
        top: 12px;
        width: 16px;
    }

    .el-tree-node.is-current > .el-tree-node__content {
        background: #c2d6ea !important;
    }

    .el-tree-node__expand-icon {
        margin-left: -3px;
        padding: 6px 6px 6px 0px;
        font-size: 16px;
    }
}

.config-layout-xy {
    display: flex;
    flex-direction: row;
	align-items: center;
    .cfg-input {
        :deep(.el-input__suffix) {
            top: 4px;
        }

        :deep(.el-input__prefix) {
            top: 4px;
            color: #000;
        }
    }
}
.cfg-width{
	width: 120px;
}
</style>
